<template>
  <div class="edit_info">
    <headTop :headClass="'white_header'">personal data</headTop>
    <div class="information">
      <label class="first info" for="upload">
        <span class="left">My head</span>
        <div class="head_img">
          <div class="img_wrap">
            <img :src="headImg" alt="">
          </div>
          <i class="iconfont icon-fanhui-copy-copy"></i>
        </div>
        <input type="file" id="upload" name="upload" ref="upload" accept="image/*" @change="selectImg">
      </label>
      <div class="info">
        <span class="left">Nickname</span>
        <input type="text" placeholder="Please enter nickname." class="right" v-model="nickname">
      </div>
      <div class="info">
        <span class="left">Real name</span>
        <input type="text" placeholder="Real names can only be entered once" class="right" :disabled="!!isSameTrueName" v-model="trueName">
      </div>
      <div class="info">
        <span class="left">My Account</span>
        <span class="right">{{phone}}</span>
      </div>
      <div class="info">
        <span class="left">MyUID</span>
        <span class="right">{{uId}}</span>
      </div>
    </div>
    <div class="confirm">
      <span class="public_btn" @click="submit">confirm</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'editInfo',
  data () {
    return {
      file: '',
      headImg: '',
      nickname: '',
      phone: '',
      uId: '',
      trueName: '',
      isSameInfo: null,
      isSameTrueName: ''
    };
  },
  beforeMount () {
    this.getInfo();
  },
  methods: {
    // Picture selection, assignment tofile
    selectImg (e) {
      this.file = e.target.files[0];
      if (this.file.size >= 3145728) {
        this.Toast('Upload pictures too large');
      } else {
        let reader = new FileReader();
        reader.addEventListener('load', () => {
          this.headImg = reader.result;
        }, false);
        if (this.file) {
          reader.readAsDataURL(this.file);
        }
      }
    },
    // Submission to editors
    submit () {
      if (this.trueName && !/^[\u4e00-\u9fa5]+$/.test(this.trueName)) {
        this.Toast('Real names cannot be numeral.、Letters and special characters');
      } else if (this.trueName && this.trueName.length > 8) {
        this.Toast('Real name is too long. Please re input.');
      } else if (this.headImg === this.isSameInfo.avatar && this.nickname === this.isSameInfo.nickname && this.trueName === this.isSameInfo.username) {
        this.Toast('No change in data.');
      } else {
        // this.confirm();
        this.getImgUrl();
      }
    },
    // get data
    getInfo () {
      this.axios.get('index/rename/rename').then(({data}) => {
        if (data.status === 200) {
          this.headImg = data.data.avatar;
          this.nickname = data.data.nickname;
          this.trueName = data.data.username;
          this.isSameTrueName = data.data.username;
          this.phone = data.data.mobile;
          this.uId = data.data.account;
          this.isSameInfo = data.data;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Editor submission
    confirm () {
      this.axios.post('index/rename/rename_exe', {
        avatar: this.headImg,
        nickname: this.nickname,
        username: this.trueName
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('Data saved successfully');
          this.$router.go(-1);
        } else {
          this.Toast(data.message);
        }
      });
    },
    getImgUrl () {
      // If the picture does not change, directly request to modify the interface, otherwise the picture is saved to the server, after the success of the request to modify the interface
      if (!this.file) {
        this.confirm();
      } else {
        let fm = new window.FormData();
        fm.append('address', this.file);
        this.axios.post('index/auth/pic_trunsfer', fm, {headers: {'Content-Type': 'multipart/form-data'}, transformRequest: [function (data) { return data; }]}).then(({data}) => {
          if (data.status === 200) {
            this.headImg = data.address;
            this.confirm();
          } else {
            this.Toast(data.message);
          }
        }).catch(() => {
          this.Toast('Submission failure');
          this.Loading(false);
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
  .edit_info{
    background-color: #fff;
    padding-top: 108px;
    .information{
      width: 100%;
      padding: 0 30px;
      position: relative;
      margin-bottom: 100px;
      .info{
        width: 100%;
        height: 110px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #e6e6e6;
        position: relative;
        .left{
          font-size: 28px;
          color: #282828;
        }
        .right{
          font-size: 26px;
          color: #282828;
        }
        input{
          flex: 1;
          height: 100%;
          text-align: right;
        }
        .head_img{
          display: flex;
          align-items: center;
          .img_wrap{
            width: 92px;
            height: 92px;
            margin-right: 16px;
            border-radius: 50%;
            img{
              width: 100%;
              height: 100%;
              border-radius: 50%;
            }
          }
          .iconfont{
            font-size: 30px;
            color: #afabbd;
          }
        }
        #upload{
          position: absolute;
          z-index: 99;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          opacity: 0;
        }
        &.first{
          height: 130px;
        }
      }
      &::before{
        display: block;
        content: '';
        width: 100%;
        height: 20px;
        background-color: #f5f5f5;
        position: absolute;
        left: 0;
        top: -20px;
      }
    }
    .confirm{
      width: 100%;
      text-align: center;
    }
  }
</style>
